﻿import QtQuick 2.9
import QtGraphicalEffects 1.0


FocusScope {
    id: root

    //图标连接
    property alias source: icon.source
    //输入字符
    property alias text: input.text
    //背景字符
    property alias hint: hint.text
    //字符回显状态
    property alias echoMode: input.echoMode
    //字体大小
    property int font_size: 18
    //连接信号
    signal accepted
    Rectangle {
        id: rectangle1

        anchors.fill:parent
        radius:  root.height/2;
        clip:true;
        color: Qt.rgba(0.5, 0.5, 0.5,0.3);

        Rectangle{
            id: rectangle
            anchors.fill: parent
            color: "#00ffffff"
            border.width: 0
            clip: true;
            Image {
                id: icon;
                anchors{top:parent.top;left: parent.left;topMargin: 5;leftMargin: 5}
                width: root.height-10;
                height:  root.height-10;
            }

            Text {
                id: hint
                //定位
                anchors{left: icon.right;leftMargin: 14}
                width: parent.width-icon.width-icon.x-14-rectangle1.radius
                height:  parent.height
                color: "#707070"
                text: qsTr("Enter word");
                font.pointSize: font_size
                //水平居中
                verticalAlignment: Text.AlignVCenter
                //显示状态
                opacity: input.length ? 0 : 1
            }

            TextInput {
                id: input;
                clip:true;
                focus: true
                anchors { left: hint.left; right: hint.right; top: parent.top; bottom: parent.bottom }
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: font_size
                color: "black"
                onAccepted: root.accepted()
            }
        }
    }
}





/*##^## Designer {
    D{i:0;autoSize:true;height:480;width:640}
}
 ##^##*/
